﻿@{
    ViewBag.Title = "Index";
    var temporal = ViewBag.ActualStep + 1;
    var anterior = ViewBag.ActualStep - 1;
    var stepsCount = ViewBag.StepsCount;
}
<style type="text/css" onload="progress()">
    #szlider{
    width:100%;
    height:15px;
    border:1px solid #000;
    overflow:hidden; }
#szliderbar{
    width:3%;
    height:25px;
    border-right: 1px solid #000000;
    background: #d65946; }
#szazalek {
    color: #000000;
    font-size: 25px;
    font-style: italic;
    font-weight: bold;
    left: 25px;
    position: relative;
    top: -16px; }
</style>

<script type="text/javascript" language="JavaScript">
<!--
    function autoResize(id) {
        var newheight;
        if (document.getElementById(id)) {
            newheight = document.getElementById(id).contentWindow.document.body.scrollHeight;
        }
        document.getElementById(id).height = newheight + "px";
    }

    function progress() {
        var szazalek = Math.round((@temporal * 100) / @stepsCount);
        
        document.getElementById("szliderbar").style.width = szazalek + '%';
        
    };
//-->
</script>
<div>
    <div>
        <h2>
            Paso @temporal de @stepsCount
        </h2>
    </div>
    <div>
        <div id="szlider">
            <div id="szliderbar">
            </div>
            <div id="szazalek">
                
            </div>
        </div>
     </div>
    <div >
        <br />
        <br />
        @if (temporal >= 0 && temporal < stepsCount)
        {
@*<a href="/Wizard/Index?actualStep=@anterior" class="ebutton2 blue">Omitir</a>*@
            @Html.ActionLink("Omitir", "Skip", "Wizard", routeValues: new { Step = temporal }, htmlAttributes: new { @class = "ebutton blue" })

            @Html.ActionLink("Siguiente", "Next", "Wizard", routeValues: new { Step = temporal }, htmlAttributes: new { @class = "ebutton blue" })
        }
        else
        {
            @Html.ActionLink("Omitir", "Skip", "Wizard", routeValues: new { Step = temporal, end = 1 }, htmlAttributes: new { @class = "ebutton blue" })

            @Html.ActionLink("Finalizar", "Next", "Wizard", routeValues: new { Step = temporal, end = 1 }, htmlAttributes: new { @class = "ebutton blue" })
        }
        @*<a href="/Wizard/Index?actualStep=@temporal" class="ebutton2 blue">Siguiente</a>*@
    </div>
    @{ TempData["uStep"] = ViewBag.StepId;}
    <div >
        <iframe id="wizardConteiner" src="@ViewBag.ActualRoute" style="width: 100%; border: 0px;" onload="autoResize('wizardConteiner')">
        </iframe>
    </div>
</div>
